import './Canvas.less';
import { Game } from "../core/Game";
import { gameManager } from '../core/GameManager';
import { onBeforeUnmount, ref, defineComponent, onMounted } from "vue"
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;

export const Canvas = defineComponent(({ ...prop }) => {
  const canvasRef = ref<HTMLCanvasElement>(); 
  onMounted(()=>{
    const game = new Game(canvasRef.value!);
    onBeforeUnmount(() => {
      game.destroy()
    })
   })


  return () => (
    <aside class="webgl-wrapper">
      <canvas onClick={() => gameManager.emit("canvas-click")} ref={canvasRef} class="webgl-canvas" width={"10px"} style={{ width: "10px" }} {...prop}>No Canvas!</canvas>
    </aside>
  )
})